import React from 'react'
import PropTypes from 'prop-types'
import {AutoComplete, Button, Col, DatePicker, Form, Input, Row, Select} from 'antd'

const FormItem = Form.Item
const { Option } = Select
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const Filter = ({
  onFilterChange,
  empList,
  handleSearch,
  departments,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  } }) => {

  const handleSubmit = () => {
    let fields = getFieldsValue()
    console.log('fields from handleSubmit', fields)
    onFilterChange(fields)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      fields[item] = undefined
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="运营微信号">
            {getFieldDecorator('operatorWx', {
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="归属员工">
            {getFieldDecorator('empId')(
              <AutoComplete
                dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                style={{ width: '100%' }}
                onSearch={handleSearch}
                placeholder="请输入"
              />,
            )}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="文本内容">
            {getFieldDecorator('textContent', {
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="点赞数">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('minPariseNum', {})(<Input placeholder="请输入" />)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('maxPariseNum', {})(<Input placeholder="请输入" />)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="评论数">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('minCommentNum', {})(<Input placeholder="请输入" />)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('maxCommentNum', {})(<Input placeholder="请输入" />)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="公司部门">
            {getFieldDecorator('deptId')(
              <Select allowClear placeholder="请选择部门" style={{ width: '100%' }}>
                {departments.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="地理位置">
            {getFieldDecorator('geoLocation', {
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="是否删除">
            {getFieldDecorator('isDelete', {
            })(
              <Select placeholder="请选择" style={{ width: 160 }}>
                <Option value={0}>是</Option>
                <Option value={1}>否</Option>
              </Select>
            )}
          </FormItem>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col md={14} sm={24}>
          <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label="发朋友圈时间">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('beginReleaseTime')(
                  <DatePicker
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    style={{ width: '100%' }} placeholder="开始时间" />)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('endReleaseTime')(
                  <DatePicker
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    style={{ width: '100%' }} placeholder="开始时间" />)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col span={10}>
          <div style={{ display: 'flex', flexWrap: 'wrap', float: 'left', width: '50%' }}>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button className="margin-right" onClick={handleFormReset}>重置</Button>
          </div>
        </Col>
      </Row>
    </div >
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func
}
export default Form.create()(Filter)
